<template>
  <div class="w">
    <div class="area-wrapper">
      <div class="city">
        <span>城市</span>
        <div>
          <a
            href="#"
            :class="{ active: c.code === isActiveCity }"
            v-for="(c, index) in hotCityList"
            :key="index"
            @click="changeCode(c.code)"
          >
            {{ c.name }}
          </a>
          <a href="#" @click="showDialog">其他城市</a>
        </div>
      </div>
      <div class="district-wrapper" v-show="businessDistrict.code !== -1">
        <span>区域</span>
        <div class="selectDistrict">
          <div class="district">
            <a href="#">不限</a>
            <a
              href="#"
              :class="{ active: c1.code === isAciveAddres }"
              v-for="c1 in businessDistrict.subLevelModelList"
              :key="c1.code"
              @click="changeAddressCode(c1.code)"
              >{{ c1.name }}</a
            >
          </div>
          <div class="area" :class="{ showMoreArea: isShowMore }">
            <div class="area-item">
              <a href="#">不限</a>
              <a
                href="#"
                v-for="c2 in address.subLevelModelList"
                :key="c2.code"
              >
                {{ c2.name }}
              </a>
            </div>
            <div class="moreArea" @click="showMore">
              {{ isShowMore ? '收起' : '展示更多' }}
              <i
                :class="
                  isShowMore ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
                "
              >
              </i>
            </div>
          </div>
        </div>
      </div>
      <div class="sort-wrapper">
        <div class="sort">
          <div
            class="sort-item"
            v-for="(s, index) in selectPositionTypeList"
            :key="index"
            @mouseenter="isShowCategory = index"
            @mouseleave="isShowCategory = -1"
          >
            <div class="ShowCategoryColor">
              {{ s.name }}
              <i
                :class="
                  isShowCategory === index
                    ? 'el-icon-caret-top'
                    : 'el-icon-caret-bottom'
                "
              >
              </i>
            </div>
            <div class="category scrollStyle" v-if="index === 0">
              <div class="sort-hover" v-for="s1 in s.data" :key="s1.code">
                <div class="categorty-title">{{ s1.name }}</div>
                <div class="category-item">
                  <div v-for="s2 in s1.subLevelModelList" :key="s2.code">
                    {{ s2.name }}
                  </div>
                </div>
              </div>
            </div>
            <div class="category category2 scrollStyle" v-else>
              <ul v-for="s3 in s.data" :key="s3.code">
                <li>
                  {{ s3.name }}
                  <i class="el-icon-caret-right" v-if="index === 1"></i>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <a href="#">清空筛选条件</a>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="40%">
      <template>
        <h1 class="chang-city">请选择城市</h1>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="热门城市" name="HotCity">
            <ul class="HotCity">
              <li v-for="(city, index) in hotCityList" :key="index">
                {{ city.name }}
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane
            v-for="(t, index) in cityType"
            :key="index"
            :label="t"
            :name="t"
          >
            <ul class="Selectcity scrollStyle">
              <li v-for="(c4, index) in showCity" :key="index">
                <div>{{ c4.firstChar }}</div>
                <ul class="cityName">
                  <li v-for="(c5, index) in c4.cityList" :key="index">
                    {{ c5.name }}
                  </li>
                </ul>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqGetCitySites,
  reqGetBusinessDistrictList,
  reqGetIndustryList,
  reqGetPositionList,
  reqGetConditionList,
  reqGetSelectPositionTypeList,
} from '@/api/position'
export default {
  name: 'LArea',
  data() {
    return {
      dialogVisible: false,
      isShowMore: false,
      isShowCategory: -1,
      hotCityList: [],
      isActiveCity: 101010100,
      businessDistrict: {},
      isAciveAddres: '',
      address: {},
      selectPositionTypeList: [],
      cityGroup: [],
      showCity: [],
      activeName: 'HotCity',
      cityType: ['ABCDE', 'FGHJ', 'KLMN', 'WXYZ'],
    }
  },
  methods: {
    showMore() {
      this.isShowMore = !this.isShowMore
    },
    ShowCategory() {
      this.isShowCategory = !this.isShowCategory
    },
    async getBusinessDistrictList(code) {
      const { zpData } = await reqGetBusinessDistrictList(code)
      this.businessDistrict = zpData.businessDistrict
      console.log(zpData.businessDistrict.code)
      this.address =
        zpData.businessDistrict.code === -1
          ? {}
          : zpData.businessDistrict.subLevelModelList[0]
    },
    changeCode(code) {
      this.isActiveCity = code
    },
    changeAddressCode(code) {
      this.isAciveAddres = code
    },
    changeCity(type) {
      const arr = type.split('')
      return this.cityGroup.filter((item1) => {
        return arr.find((item) => item === item1.firstChar)
      })
    },
    handleClick(tab) {
      this.showCity = this.changeCity(tab.name)
    },
    showDialog() {
      this.dialogVisible = true
    },
  },

  async mounted() {
    const res = await Promise.all([
      reqGetCitySites(),
      reqGetIndustryList(),
      reqGetPositionList(),
      reqGetConditionList(),
      reqGetSelectPositionTypeList(),
    ])
    console.log(res)
    this.selectPositionTypeList = res[4].zpData
    this.hotCityList = res[0].zpData.hotCityList
    this.selectPositionTypeList.forEach((item, index) => {
      switch (index) {
        case 0:
          item.data = res[1].zpData
          break
        case 1:
          item.data = res[2].zpData
          break
        case 2:
          item.data = res[3].zpData.degreeList
          break
        case 3:
          item.data = res[3].zpData.experienceList
          break
        case 4:
          item.data = res[3].zpData.salaryList
          break
        case 5:
          item.data = res[3].zpData.scaleList
          break
        case 6:
          item.data = res[3].zpData.stageList
          break
      }
    })
    this.cityGroup = res[0].zpData.cityGroup
  },
  watch: {
    isActiveCity: {
      immediate: true,
      handler() {
        const code = this.isActiveCity
        this.getBusinessDistrictList(code)
      },
    },
    isAciveAddres: {
      handler(newVal) {
        this.address = this.businessDistrict.subLevelModelList.find((item) => {
          if (item.code === newVal) {
            return item
          }
        })
      },
    },
  },
}
</script>

<style scoped>
.area-wrapper span {
  font-size: 16px;
  font-weight: 500;
  color: #222;
}
.area-wrapper a {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  margin: 0 10px;
}
.area-wrapper a:hover {
  color: #00a6a7;
}
.city {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.city > div {
  margin-left: 30px;
}
.district-wrapper {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}
.selectDistrict {
  flex: 1;
  background: #f8f8f8;
  padding: 0 12px;
  border-radius: 4px;
  margin-left: 20px;
}
.district {
  padding: 10px 0;
  border-bottom: 1px solid #ececec;
}
.area {
  display: flex;
  justify-content: space-between;
  max-height: 18px;
  overflow: hidden;
  padding: 10px 0;
}
.showMoreArea {
  max-height: none;
}
.area-item {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.area-item a {
  margin-bottom: 10px;
}
.area .moreArea {
  font-size: 14px;
  font-weight: 400;
  color: #00a6a7;
  cursor: pointer;
}
.sort-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sort-wrapper a {
  float: right;
  font-size: 14px;
  font-weight: 400;
  color: #999;
}
.sort {
  display: flex;
}
.sort-item {
  position: relative;
  background-color: #f1f1f1;
  margin-right: 15px;
  font-size: 14px;
  font-weight: 400;
  color: #222;
  line-height: 20px;
  cursor: pointer;
  box-sizing: border-box;
}
.ShowCategoryColor {
  border-radius: 5px;
  padding: 6px 10px 6px 12px;
}
.category {
  position: absolute;
  width: 860px;
  height: 300px;
  overflow: auto;
  top: 32px;
  left: 0;
  border: 1px solid #ececec;
  display: none;
  align-items: center;
  padding: 10px 0;
  border-radius: 5px;
  transition: all 0.2s linear;
  z-index: 20;
  background-color: #fff;
}
.sort-hover {
  display: flex;
}
.sort-item:hover .category {
  display: block;
}
.sort-item:hover .ShowCategoryColor {
  color: #00a6a7;
  background-color: #e4f7f7;
}
.categorty-title {
  flex-shrink: 0;
  width: 20%;
  text-align: center;
  align-self: stretch;
}
.category-item {
  display: flex;
  flex-wrap: wrap;
}
.category-item div {
  padding: 0 20px 0 20px;
  margin-bottom: 20px;
}
.category-item div:hover {
  background-color: #e4f7f7;
  color: #00a6a7;
}
.category2 {
  width: 168px;
  box-sizing: border-box;
}
.category2 ul > li {
  display: flex;
  justify-content: space-between;
  padding: 4px;
  margin: 5px;
}
.category2 ul > li:hover {
  background-color: #e4f7f7;
  color: #00a6a7;
}
.active {
  color: #00a6a7 !important;
}
.HotCity {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}
.HotCity li {
  padding: 20px 30px;
  cursor: pointer;
}
.HotCity li:hover {
  color: #00a6a7;
}
.Selectcity {
  height: 300px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.Selectcity > li {
  display: flex;
  justify-content: space-between;
  color: #00a6a7;
  padding: 20px 30px;
}

.cityName {
  display: flex;
  flex-wrap: wrap;
}
.cityName > li {
  color: #222;
  padding: 0 30px 20px 30px;
}
.chang-city {
  padding: 20px;
  color: #222;
}
</style>
